import React,{useContext} from 'react';
import style from './Robot.module.css';
import { appContext } from '../index';
interface RobotProps {
    id: number,
    name: string,
    email: string
}

const Robot: React.FC<RobotProps> = ({ id, name, email }) => {
    // const id = props.id
    const value = useContext(appContext)
    return (

        <div className={style.cardContainer}>
            <img alt={name} src={`https://robohash.org/${id}`} />
            <h2>name:{name}</h2>
            <p>email:{email}</p>
            <p>歌手：{value.singer}</p>
        </div>

    )
    /* return (
        <appContext.Consumer>
            {(value) => {
                return (
                    <div className={style.cardContainer}>
                        <img alt={name} src={`https://robohash.org/${id}`} />
                        <h2>name:{name}</h2>
                        <p>email:{email}</p>
                        <p>歌手：{value.singer}</p>
                    </div>
                )
            }}
        </appContext.Consumer>
    ) */
}

export default Robot
